<template>
    <a-input v-model:value="getValue" @blur="onBlur" :controls="false" allowClear :disabled="disabled">
        <template #suffix>
            <SettingOutlined @click="setLanguage"/>
        </template>
    </a-input>
</template>

<script>
import { SettingOutlined } from '@ant-design/icons-vue';
import { Util } from '@lowcode/jpaas-base-lib';
import LangInputDialog from "./lang-input-dialog.vue";
export default {
    name: "LangInput",
    components:{
        SettingOutlined
    },
    props:{
        modelValue:{
            default:()=>{
                return {'zh-CN':''}
            }
        },
        disabled:{
            default:false
        }
    },
    emits:['update:modelValue','blur'],
    data(){
        return {
            name:{}
        }
    },
    computed:{
        getValue:{
            get(){
                let lang = window.localStorage.getItem('language') || 'zh-CN'
                return this.name[lang]
            },
            set(value){
                let lang = window.localStorage.getItem('language') || 'zh-CN';
                this.name[lang] = value ;
                this.$emit('update:modelValue',this.name);
            }
        }
    },
    methods:{
        i18n(name, text, key){
            return this.$ti18(name, text, "langInputLang", key);
        },
        setLanguage(){
            if(this.disabled){ return }
            Util.open({
                curVm:this,
                widthHeight:['500px','300px'],
                title:this.i18n('LanguageSettings','语言设置'),
                component:LangInputDialog,
                zIndex:999999,
                data:{
                    langData:this.name
                }
            },(action,data)=>{
                if(action === 'ok'){
                    this.name = data ;
                    this.$emit('update:modelValue',data);
                }
            })
        },
        onBlur(){
            this.$emit('blur',this.name);
        },
        isString(value) {
            return typeof value === 'string';
        }
    },
    watch:{
        modelValue:{
            handler(v) {
                if(this.isString(v)){
                    if(!v.includes('zh-CN')){
                        this.name = {
                            'en-US':'',
                            'es-ES':'',
                            'ja-JP':'',
                            'zh-CN':v,
                        }
                    }else {
                        this.name = JSON.parse(v)
                    }
                }else {
                    this.name = v;
                }
            },
            deep:true,
            immediate:true
        }
    }
}
</script>

<style scoped>

</style>
